<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/scripts/jquery-1.7.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/pages/web/shopCart.js"></script>
<s:url action="shopcart" namespace="/ajax" method="loadProductsByIds"
	var="loadProductsByIdsUrl"></s:url>
<script type="text/javascript">
var loadProductsByIdsUrl='${loadProductsByIdsUrl}'
</script>
<script type="text/javascript">
	$(document).ready(function(){
		shopCart.loadCookie();
		extendsShopCart();
		//showTotalCost();
	});
	function extendsShopCart(){
		shopCart.changeProductWithPiece=function(productId,piece){
			//alert(this.store);
			var tmp=this.getProductFromStore(productId);
			 tmp.piece=piece;
			shopCart.addProductToCookie(tmp,10)
			afterClick(productId);
		}
	}
	
	function minus(productId){
		if(shopCart.getProductFromStore(productId).piece==0){
			$("#product_row_"+productId).remove();
		}else{
			shopCart.subProductToStoreById(productId);
		}
		afterClick(productId);
		//alert(shopCart.store)
	}
	function plus(productId){
		shopCart.addProductToStoreById(productId);
		afterClick(productId);
	}
	function afterClick(productId){
		var row=$("#product_row_"+productId);
		var piece=shopCart.getProductFromStore(productId).piece;
		var price=$(row.find("td:eq(4)")[0]).text();
		var cost=piece* price;
		//alert(cost.toFixed(1));
		$(row.find("input")[0]).val(piece);
		$(row.find("td:eq(5)")).text(cost.toFixed(1));	
		
		showTotalCost();
	}
	
	function changeProductPiece(productId,object){
		//alert(productId)
		//alert($(object).val());
		var piece=	$(object).val();
		if(isNaN(piece)||piece<0){
			alert("请输入正确数字");
			return false;
		}
		shopCart.changeProductWithPiece(productId,piece);
	}
	
	function showTotalCost(){
		var trs=$("#shopCartTable").find("tbody>tr");
		var cost=0;
		$.each(trs,function(i,el){
		 if(!isNaN(parseFloat($(el).find("td:eq(5)").text()))){
			cost+=parseFloat($(el).find("td:eq(5)").text());
		 	}
		})
	//alert(trs.length);
		$("#totalCost").text(cost.toFixed(1));
	}
	
</script>
</head>
<body>
	<style>
body {
	margin: 0;
	font-size: 12px;
}

.order-table thead tr {
	background-color: #E2F2FF;
	text-align: center;
	height: 40px;
}

.order-table thead th {
	text-align: center;
	color: #404040;
	border-top: 3px solid #A7CBFF;
}

.order-table tbody td {
	padding: 5px;
	text-align: center;
	border-top: 1px solid #D1EBFF;
	border-bottom: 1px solid #D1EBFF;
}

.order-table tbody td.s-amount a {
	display: inline-block;
	width: 9px;
	height: 9px;
	line-height: 9px;
	text-align: center;
	background: white;
	font-family: arial;
	overflow: hidden;
	color: #555;
	border: 1px solid #DBDBDB;
	margin: 5px 0 0;
	border-image: initial;
}

.order-table tbody td.s-amount a.minus {
	text-indent: 1px;
	margin-right: 3px;
	margin-left: 0;
}

a:hover {
	text-decoration: underline;
}
</style>

	<h1 style="text-align: left; color: #FF6600">
		购物车详情&nbsp;&nbsp;&nbsp;<font style="color: gray">>>&nbsp;&nbsp;&nbsp;确认订单</font>&nbsp;&nbsp;&nbsp;<font
			style="color: gray">>>&nbsp;&nbsp;&nbsp;生成订单</font>
	</h1>
	<table class="order-table" style="width: 900px; font-size: inherit;"
		cellspacing="0" cellspadding="0" id="shopCartTable">
		<thead>
			<tr>
				<th>编号</th>
				<th>名称</th>
				<th>图片</th>
				<th>份数</th>
				<th>单价</th>
				<th>价格</th>
			</tr>
		</thead>
		<tbody>
			<s:iterator value="orderProducts" status="rowstatus">
				<tr id="product_row_<s:property value="product.id"/>">
					<td><s:property value="#rowstatus.index+1" /></td>
					<td><s:property value="product.name" /></td>
					<td><img
						src="${pageContext.request.contextPath}/<s:property value="product.productFile.urlPath"/>"
						width="129px" height="44px" /></td>
					<td class="s-amount"><a href="#" class="minus"
						onclick="minus(<s:property value="product.id"/>)">-</a> <s:textfield
							name="piece" style="width:20px" theme="simple"
							onchange="changeProductPiece(%{product.id},this)" /> <a href="#"
						class="plus" onclick="plus(<s:property value="product.id"/>)">+</a>
					</td>
					<td><s:property value="product.price" /></td>
					<td><s:property value="product.price*piece" /></td>
				</tr>
			</s:iterator>

			<s:set name="totalCost" value="0"></s:set>
			<s:iterator value="orderProducts" status="rowstatus">
			</s:iterator>
			<tr>
				<td colspan="6" style="text-align: right">总金额：<span
					id="totalCost"><s:property value="cost" />
				</span> &nbsp; <s:a action="customer" namespace="/web" method="confirm">结算</s:a>
				</td>
			</tr>
		</tbody>
	</table>
</body>
</html>
